<template>
  <div id="fullScreenBox" class="flex-center">
    <div class="avatarBox" v-show="!bigInfo.camera">
      <avatar :imgID="userInfo.user_img_id" :id="fullScreenID" :radius="true"></avatar>
    </div>
    <video autoplay ref="bigVideo" class="bigVideo" v-show="bigInfo.camera"></video>
    <div class="smallBox" v-if="!tools.isSelf(fullScreenID)">
      <div class="smallAvatarBox" v-show="!smallInfo.camera">
        <avatar :imgID="selfInfo.user_img" :fileType="1" :id="selfInfo.user_id"
                :radius="true"></avatar>
      </div>
      <video autoplay ref="smallVideo" class="smallVideo" v-show="smallInfo.camera"></video>
      <div class="smallDes">
        <span>{{ selfInfo.user_name }}</span>
        <img
          :src="smallInfo.voiced ? require('@/assets/cfRoom/images/onAudio.png') : require('@/assets/cfRoom/images/offAudio.png')"
          :class="[smallInfo.camera ? 'voice' : 'voiceNoCamera']"
          ondragstart="return false"
        />
        <img
          :src="smallInfo.camera ? require('@/assets/cfRoom/images/onVideo.png') : require('@/assets/cfRoom/images/offVideo.png')"
          :class="[smallInfo.camera ? 'camera' : 'noCamera']"
          ondragstart="return false"
        />
        <img src="@/assets/cfRoom/images/fullScreen.png" ondragstart="return false" class="fullScreen cp" v-show="smallInfo.camera" @click="changeFullScreen">
      </div>
    </div>
    <div class="memberCount">{{ memberCount }}</div>
    <img class="exitFullScreen cp" src="@/assets/cfRoom/images/exitFullScreenBtn.png"
         ondragstart="return false" @click="exitFullscreen">
    <div class="des flex-end">
      <div class="host singleLine" v-if="tools.conference.isHost(bigInfo.id)">主持人</div>
      <div class="mic">
        <microPhone v-if="bigInfo.voiced" :volume="volume"></microPhone>
        <img v-else src="@/assets/cfRoom/images/offAudio.png" alt="">
      </div>
      <span>{{ userInfo.user_name }}</span>
    </div>
    <messageBox></messageBox>
  </div>
</template>

<script>
import messageBox from './messageBox'
import microPhone from './microPhone'

export default {
  name: 'fullScreen',
  data () {
    return {
      // 音量处理对象
      volumeProgress: null,
      // 实时音量
      volume: null
    }
  },
  computed: {
    // 全屏用户的ID
    fullScreenID () {
      return this.$store.state.conferenceRoom.cf_fullScreen_id
    },
    // 全屏用户的信息
    userInfo () {
      return this.$store.state.chatInformation.userList[this.fullScreenID]
    },
    // 大屏信息
    bigInfo () {
      return this.$store.state.conferenceRoom.cf_members.filter(item => item.id === this.fullScreenID)[0]
    },
    // 小屏信息
    smallInfo () {
      if (!this.tools.isSelf(this.fullScreenID)) {
        return this.$store.state.conferenceRoom.cf_members.filter(item => this.tools.isSelf(item.id))[0]
      } else {
        return []
      }
    },
    // 本人信息
    selfInfo () {
      return this.$store.state.user.userInfo
    },
    // 会议在线人数
    memberCount () {
      return this.$store.state.conferenceRoom.cf_members.length
    }
  },
  watch: {
    // 大视频的数据
    bigInfo: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val && val.stream) {
          this.$nextTick(() => {
            if (this.$refs.bigVideo) {
              this.$refs.bigVideo.srcObject = val.stream
              this.$refs.bigVideo.onloadedmetadata = () => {
                this.$refs.bigVideo.play()
              }
              this.$refs.bigVideo.addEventListener('pause', () => {
                if (this.$refs.bigVideo) {
                  this.$refs.bigVideo.play()
                }
              })
              this.$refs.bigVideo.addEventListener('ended', () => {
              }, false)
              // 获取音量
              this.tools.webRTC.getVolume(val.stream).then(progress => {
                this.volumeProgress = progress
                // 监听音量变化
                this.volumeProgress.onaudioprocess = (e) => {
                  const volume = e.inputBuffer.getChannelData(0)
                  let maxVolume = Math.max.apply(Math, volume)
                  maxVolume = Math.round(maxVolume * 100)
                  this.volume = maxVolume
                }
              })
            }
          })
        }
      }
    },
    // 小视频的数据
    smallInfo: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val && val.stream) {
          this.$nextTick(() => {
            if (this.$refs.smallVideo) {
              this.$refs.smallVideo.srcObject = val.stream
              this.$refs.smallVideo.onloadedmetadata = () => {
                this.$refs.smallVideo.play()
              }
              this.$refs.smallVideo.addEventListener('pause', () => {
                if (this.$refs.smallVideo) {
                  this.$refs.smallVideo.play()
                }
              })
              this.$refs.smallVideo.addEventListener('ended', () => {
              }, false)
            }
          })
        }
      }
    }
  },
  components: {
    messageBox,
    microPhone
  },
  methods: {
    // 移除全屏关联的用户ID
    removeFullScreenID () {
      if (!document.fullscreenElement && !document.msFullscreenElement && !document.mozFullScreen && !document.webkitIsFullScreen) {
        this.$store.commit('conferenceRoom/set_fullScreen_id', null)
      }
    },
    // 退出全屏
    exitFullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
    // 点击小窗口全屏切换本人全屏
    changeFullScreen () {
      this.$store.commit('conferenceRoom/set_fullScreen_id', this.selfInfo.user_id)
    }
  },
  mounted () {
    const fullBox = document.getElementById('fullScreenBox')
    if (fullBox.requestFullScreen) {
      fullBox.requestFullScreen()
    } else if (fullBox.mozRequestFullScreen) {
      fullBox.mozRequestFullScreen()
    } else if (fullBox.webkitRequestFullScreen) {
      fullBox.webkitRequestFullScreen()
    }
    // 监听全屏事件，浏览器兼容处理
    document.addEventListener('fullscreenchange', this.removeFullScreenID
      , false)
    document.addEventListener('msfullscreenchange', this.removeFullScreenID, false)
    document.addEventListener('mozfullscreenchange', this.removeFullScreenID, false)
    document.addEventListener('webkitfullscreenchange', this.removeFullScreenID, false)
  },
  beforeDestroy () {
    // 移除监听全屏事件
    document.removeEventListener('fullscreenchange', this.removeFullScreenID)
    document.removeEventListener('msfullscreenchange', this.removeFullScreenID)
    document.removeEventListener('mozfullscreenchange', this.removeFullScreenID)
    document.removeEventListener('webkitfullscreenchange', this.removeFullScreenID)
  }
}
</script>

<style scoped lang="scss">
#fullScreenBox {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99;

  .avatarBox {
    display: inline-block;
    width: 96px;
    height: 96px;
  }

  .bigVideo {
    width: 100%;
    height: 100%;
  }

  .smallBox {
    width: 300px;
    height: 184px;
    border-radius: 4px;
    position: absolute;
    right: 60px;
    bottom: 60px;
    background-color: #000;

    .smallAvatarBox {
      width: 64px;
      height: 64px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    video {
      width: 100%;
      height: 100%;
    }

    .smallDes {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 32px;
      background-color: rgba(12,23,47,0.60);
      line-height: 32px;
      padding: 0 12px;

      span {
        font-size: 14px;
        font-weight: 400;
        color: #fff;
      }

      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      .voice {
        right: 76px;
      }

      .voiceNoCamera {
        right: 44px;
      }

      .camera {
        right: 44px;
      }

      .noCamera {
        right: 12px;
      }

      .fullScreen {
        right: 12px;
      }
    }
  }

  .memberCount {
    padding-left: 40px;
    padding-right: 15px;
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    background-color: rgba(12, 23, 47, 0.6);
    background-image: url('../../../assets/cfRoom/images/member.png');
    background-size: 24px 24px;
    background-position: 8px center;
    background-repeat: no-repeat;
    position: absolute;
    top: 24px;
    right: 74px;
    color: #fff;
  }

  .exitFullScreen {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 99;
    width: 40px;
    height: 32px;
  }

  .des {
    position: absolute;
    right: 6px;
    bottom: 6px;
    height: 32px;
    line-height: 32px;
    font-size: 0;
    background-color: rgba(12, 23, 47, 0.60);

    .host {
      width: 72px;
      height: 32px;
      text-align: center;
      background-color: #FFB415;
      color: #fff;
      font-size: 16px;
      display: inline-block;
    }

    .mic {
      height: 20px;
      width: 20px;
      display: inline-block;
      margin-left: 5px;

      img {
        width: 20px;
        height: 20px;
        vertical-align: top;
      }
    }

    span {
      color: #fff;
      font-size: 16px;
      padding-right: 8px;
    }
  }
}
</style>
